<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>

    <!-- style sheet css -->
    <style type="text/css">
        body {
            margin: 0 10px;
            font-size: 75%;
            background-color: #fff;
        }

        body, td {
            font-family: 'Arial', 'Helvetica', sans-serif;
            color: #222;
        }

        td {
            margin: 0;
            color: #333;
        }

        body .bPageBlock
        {
            background-color: #f8f8f8;
            border-left: 1px solid #eaeaea;
            border-right: 1px solid #eaeaea;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
        }



        body .bPageBlock {
            padding: 0;
            margin-bottom: 10px;
            border-top-width: 3px;
        }

        .bPageBlock {
            font-size: 105%;
            /*border-top: 4px solid #222;*/
            /*border-top: 4px solid #737e96;*/
            margin-bottom: 9px;
            background-color: #222;
            padding-bottom: 9px;
            clear: both;
        }

        body .bPageBlock .pbBody {
            padding: 0;
        }

        body .bPageBlock,
        body .bPageBlock .pbBody {
            margin: 0;
        }

        .bPageBlock .pbBody {
            margin-right: 2px;
            padding: 6px 20px 4px 20px;
            background-color: #f3f3ec;
        }

        .pbBody, .pbBody a, .pbBody td {
            color: #000;
        }

        .pbBody > table.list,
        body .pbBody > table.list {
            border: 1px solid #e0e3e5;
        }

        body .pbBody table.list {
            background-color: #fff;
            border-top: 1px solid #e0e3e5;
        }

        .bPageBlock .list {
            width: 100%;
        }

        body .pbBody table.list tr.dataRow th, body .pbBody table.list tr.dataRow td {
            border-width: 0 0 1px 0;
            vertical-align: middle;
        }

        .list tr.even th, .list tr.odd th {
            font-weight: normal;
            white-space: normal;
        }

        body .pbBody table.list tr th, body .pbBody table.list tr td {
            border: 1px solid #ededed;
            color: #000;
        }

        .list tr.even th, .list tr.odd th, .list tr.even td, .list tr.odd td {
            vertical-align: top;
        }

        .pbBody, .pbBody a,
        .pbBody td {
            color: #000;
        }

        body, td {
            font-family: Arial, Helvetica, sans-serif;
            color: #222;
        }

        body .pbBody table.list tr.headerRow th:first-child, body .pbBody table.list tr.dataRow td:first-child {
            border-left-width: 0;
        }

        body .pbBody table.list tr.headerRow td, body .pbBody table.list tr.headerRow th {
            background: #f2f3f3;
            border-width: 0 0 1px 1px;
            border-color: #e0e3e5;
            color: #000;
            font-size: .9em;
            font-weight: bold;
            padding: 5px 2px 4px 5px;
        }

        body .pbBody table.list tr th, body .pbBody table.list tr td {
            border: 1px solid #ededed;
            color: #000;
        }

        .list .headerRow th {
            font-size: 93%;
        }

        .list .headerRow th {
            border-bottom: 2px solid #ccc;
            white-space: nowrap;
        }

        body table.list tr td,
        body table.list tr th {
            border-color: #ececec;
        }

        .list td, .list th, body.oldForecast .list .last td, body.oldForecast .list .last th {
            padding: 4px 2px 4px 5px;
            color: #333;
            border-bottom: 1px solid #e3deb8;
        }

        th {
            text-align: left;
            font-weight: bold;
            white-space: nowrap;
        }

        body .footer {
            text-align: center;
            font-size: .8em;
            border: 0;
        }

        .footer {
            margin-top: 20px;
            border-top: 2px solid #d9d9d9;
            padding-top: .5em;
            text-align: center;
            color: #878787;
        }

        div.desc {
            padding: 4px 3px;
            font-family: 'Arial', 'Helvetica', sans-serif;
            font-weight: bold;
            font-size: 118%;
        }

    </style>
</head>
<body>
<div class="desc">请选择数据</div>
<!-- table -->
<div class="bPageBlock">
    <div class="pbBody">
        <table class="list" cellspacing="0" cellpadding="0" border="0">
            <tbody>
            <tr class="headerRow">
                <!--<th scope="col" >Candidates Number</th>
                <th scope="col" >First Name</th>
                <th scope="col" >Last Name</th>
                <th scope="col" >City</th>
                <th scope="col" >States/Provinces</th>
                <th scope="col" >Phone</th>-->
            </tr>
            <!--<tr class="dataRow even first">
                <th scope="row"><a href="#"
                                   onclick="top.window.opener.lookupPick('editPage','CF00N28000004hpwb_lkid','CF00N28000004hpwb','','a0528000001ATjY','C-00008','','')">C-00008</a>
                </th>
                <td>Nick</td>
                <td>Tran</td>
                <td>上海</td>
                <td>NY</td>
                <td>(650) 650-6506</td>
            </tr>
            <tr class="dataRow odd last">
                <th scope="row"><a href="#" class="  "
                                   onclick="top.window.opener.lookupPick('editPage','CF00N28000004hpwb_lkid','CF00N28000004hpwb','','a0528000001ARvv','C-00001','','')">C-00001</a>
                </th>
                <td>Li</td>
                <td>Fans</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>-->
            </tbody>
        </table>
    </div>
</div>
<div class="footer"></div>



<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>

    function close() {
        window.open("","_self").close();
    }

    function loadReferenceData() {
        if(top.window.opener==null) return;
        var set = checkParams();
        if(set === false) return;
        //

    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    function checkParams() {
        if(getUrlParam('url') == null) return false;
        if(getUrlParam('set') == null) return false;
        var set = getUrlParam('set');
        try {
            set = JSON.parse(set);
        } catch (err) {
            console.error(err);
            return false;
        }
        if(!($.isPlainObject(set))) return false;

        var id = set.id;
        if(id === undefined) return false;
        var cols = set.cols;
        if((cols === undefined)||!($.isArray(cols))) return false;
        var isOk = true;
        $.each(cols, function (idx, col) {
            if(!($.isPlainObject(set))) {
                isOk = false;
                return false;
            }
            if((col.title === undefined)||(col.name === undefined)) {
                isOk = false;
                return false;
            }
        })
        if(isOk === false) return false;
        return set;
    }




    var url = '/data/load/xx';
    var colSetting = {
      id:'key1',
        cols: [{
            title:'no',
            name:'no'
        },
            {
                title:'des',
                name:'des'
            }]
    };

    var dat = [{
        no:1,
        key1:2,
        des:'hello'
    },{
        no:2,
        key1:3,
        des:'ok'
    }];

    var col_names = [];
    var $tr = $('tr.headerRow');
    $tr.html('');
    $.each(colSetting.cols, function (idx, col) {
        var $th=$('<th scope="col" ></th>');
        $th.text(col.title);
        $tr.append($th);
        //
        col_names.push(col.name);
    });

    $tbody = $('tbody');
    $.each(dat, function (idx, col_dat) {
        var id = col_dat[colSetting.id];
        var $tr_dat = $('<tr class="dataRow even old"></tr>');
        var $th = $('<th scope="row"></th>');
        var $lnk = $('<a></a>');
        $lnk.text(col_dat[col_names[0]]);
        $lnk.attr('href', '#');
        $lnk.attr('onclick', 'alert('+col_dat[col_names[0]]+':'+id+');');

        $th.append($lnk);

        $tr_dat.append($th);

        $.each(col_names, function (idx, name) {
            if(idx == 0) return true;
            var $td = $('<td></td>');
            $td.text(col_dat[name]);
            $tr_dat.append($td);
        });
        //
        $tbody.append($tr_dat);
    });
</script>
</body>

</html>